<template>
	<view>
		<uni-grid :column="3" :highlight="true" @change="change">
			<uni-grid-item
				v-for="(item, index) in gridList"
				:index="index"
				:key="index"
			>
				<view class="grid-item-box" style="background-color: #fff">
					<uni-icons :type="item.icon" :size="30" color="#777" />
					<text class="text">{{ item.text }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>
<script>
export default {
	data() {
		return {
			gridList: [
				{
					text: '产品信息',
					icon: 'list'
				},

				{
					text: '空间信息',
					icon: 'flag'
				},
				// {
				// 	text: '二级类别',
				// 	icon: 'map'
				// },
				{
					text: '功能信息',
					icon: 'star'
				},
				{
					text: '方案清单',
					icon: 'gift'
				}
			]
		}
	},
	methods: {
		change(e) {
			switch (e.detail.index) {
				case 0:
					uni.navigateTo({ url: '/pages/my/deviceCategory' })
					break
				case 1:
					uni.navigateTo({ url: '/pages/my/space' })
					break
				// case 2:
				// 	uni.navigateTo({ url: '/pages/my/secondCategory' })
				// 	break
				case 2:
					uni.navigateTo({ url: '/pages/my/feature' })
					break
				case 3:
					uni.navigateTo({ url: '/pages/my/plan' })
					break
			}
		}
	}
}
</script>
<style scoped lang="scss">
.image {
	width: 25px;
	height: 25px;
}

.text {
	font-size: 14px;
	margin-top: 5px;
}

.grid-dynamic-box {
	margin-bottom: 15px;
}

.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.grid-item-box-row {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.grid-dot {
	position: absolute;
	top: 5px;
	right: 15px;
}

.swiper {
	height: 420px;
}
</style>
